
<style lang="scss"  scoped>  

.mouts{
      width: 100%;
      height: 736px;
      background-color:#f7f7f7;
}

.top{
         background-color: white;
     div{
       height: 116px;
       text-align: center;
       margin-top: 20px;
       font-size: 24px;
      p{}
       p:nth--chil(2){
           font-size:211px;
       }
     }
}
.send{
      width: 100%;
     height: 107px;
     background-color: white;
      div{
            width: 94%;
            margin-left: 10px;
            background-color: #f7f7f7;
            p{
               margin-left: 10px;
               line-height: 30px;
            }
      }
}

.threes{
      margin-top: 10px;
      height: 308px;

      background-color: white;
      div:nth-child(1)
      {
          
          span:nth-child(2)
          {
                margin-left: 230px;
          }
      }
}

</style>



<template> 
    <div>
        <div class="mouts">

               <div class="top">

                    <div>
                         <p>0分钟</p>
                         <p>睡眠时长</p>
                    </div>

               </div>
              
               <div class="send">
                  
                    <div>
                         <p>还没有您的睡眠记录</p>
                         <p>通过智能设备上传您的睡眠数据,看看健康顾问怎么说</p>
                    </div>
                 
               </div>

                 
               <div class="threes">

                  <div>
                     <span>近7日记录</span>
                     <span>查看更多记录></span>
                  </div>
                     
                  <div>

                  </div>

                  <div>

                  </div>
                 
               </div>

        </div>
    </div>
</template>

<script  lang="ts" >
    
</script>